import React from 'react'
import {  Routes, Route} from 'react-router-dom';
import Home from '../src/components/Home'
import ListPage from '../src/components/ListPage'
import DetailPage from '../src/components/DetailPage'
import Child1 from '../src/components/Child1'
import Child2 from '../src/components/Child2'
import Child3 from '../src/components/Child3'
export default function App() {
 
  return (
   <>
   <div>
    <a href="/">Home</a>
    <a href="/ListPage">ListPage</a>
    <a href="/DetailPage/3">DetailPage</a>
   </div>
    <div>

    <Routes>
      <Route  path="/" element={<Home/>} />
      <Route  path="/listPage" element={<ListPage/>} />
      <Route  path="/detailPage/:id" element={<DetailPage />} >
        <Route path='child1' element={<Child1/>}>
            <Route path='child2' element={<Child2/>}></Route>
        </Route>
        <Route path='child3' element={<Child3/>}></Route>
      </Route>
      {/* <Route exact path="*" element={<NotFound />} /> */}
    </Routes>

    </div>
   </>
  )
}


